import Vue from 'vue';
import { boot } from 'quasar/wrappers';
import prismjs from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/toolbar/prism-toolbar.js';
import 'prismjs/plugins/toolbar/prism-toolbar.css';
import 'prismjs/plugins/show-language/prism-show-language.js';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js';
import 'prismjs/plugins/inline-color/prism-inline-color.js';
import 'prismjs/plugins/inline-color/prism-inline-color.css';
// import hljs from 'highlight.js';
// import 'highlight.js/styles/atom-one-dark.css'; //样式

// import 'highlight.js/styles/an-old-hope.css'; //样式

export type HighlightCallback = (element: Element) => void;
export type Prism = {
  highlightAll: () => void;
  highlightElement: (
    element: Element,
    async?: boolean,
    callback?: HighlightCallback
  ) => void;
};

declare module 'vue/types/vue' {
  interface Vue {
    $prism: Prism;
  }
}
export default boot(({ Vue }) => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  Vue.prototype.$prism = prismjs;
  Vue.directive('highlight', function(el) {
    // let blocks = el.querySelectorAll('pre code');
    // blocks.forEach(block => {
    //   hljs.highlightBlock(block as any);
    // });
  });
});
